<template>
  <el-select
    v-model="value"
    v-bind="$attrs"
    collapse-tags
    clearable
    filterable
    @change="change"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>
<script setup>
const props = defineProps({
  modelValue: [String, Number, Array],
  options: {
    type: Array,
    default: () => [],
  },
});

const value = computed({
  get: () => {
    return props.modelValue || "";
  },
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const emit = defineEmits(["update:modelValue", "change"]);
const change = (val) => {
  const item = props.options.find((i) => i.value == val);

  emit("update:modelValue", val);
  emit("change", item?.label || "");
};
</script>
